.packets-container{
    .details{
        position: fixed;
        bottom: 150rpx;
        z-index: 999;
        right: 20rpx;
        padding: 10rpx;
        line-height: 80rpx;
        text-align: center;
        width:80rpx;
        height:80rpx;
        background:#ffff;
        box-shadow:3px 4px 10px 0px rgba(0, 0, 0, 0.2);
        opacity:0.8;
        border-radius: 50%;
    }
    .packets-tab{
        display: flex;
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid #EEEEEE;
        background-color: #fff;
        position: sticky;
        top:0;
        z-index: 100;
        .tab-item{
            flex: 1;
            text-align: center;
            position: relative;
            color: #666666;
            font-weight: 100;
            .borderBottom{
                width: 32rpx;
                position: absolute;
                height: 6rpx;
                border-radius: 10rpx;
                display: block;
                position: absolute;
                left: 50%;
                margin-left: -16rpx;
                bottom: 10rpx;
                background-color: #333333;
            }
        }
        .active{
            color: #333333;
            font-weight: bold;
        }
    }
    .list_view{
        .couponList{
            padding: 20rpx;
            .couponItem{
                background-image: url("~@/static/images/mine/card-background-vertical.png");
                background-size: 100%;
                border-radius: 10rpx;
                position: relative;
                z-index: 2;
                padding: 40rpx 10rpx 10rpx 10rpx;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20rpx;
                .descripe{
                    flex: 1;
                    padding:0px 2%;
                    align-items: left;
                    width: 96%;
                    display: flex;
                    color: #999;
                    justify-content: space-between;
                    .price{
                        margin-bottom: -4rpx;
                        .price_small{
                            color: #FE4034;
                            font-size: 24rpx;
                        }
                        .price_bold{
                            font-weight: bold;
                            font-size: 60rpx;
                            color: #FE4034;
                        }
                        .unusePrice{
                            color: #bbb;
                        }
                        .left_tit{
                          display: inline-block;
                          font-weight: 100;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                          width: 320rpx;
                          margin:0 0 10rpx 20rpx;
                          color: #000;
                        }
                      }
                      .timeView{
                        font-size: 24rpx;
                      }
                      .receive{
                        width:120rpx;
                        height:60rpx;
                        color: white;
                        margin-right: 20rpx;
                        line-height: 60rpx;
                        background:#FE4034;
                        text-align: center;
                        font-size: 24rpx;
                        border-radius:30rpx;
                        span{
                          color: white;
                        }
                      }
                      .unuse{
                            background: #bbb;
                        }
                      .packet_receive{
                        width:120rpx;
                        height:60rpx;
                        color: #fff;
                        margin-right: 20rpx;
                        line-height: 60rpx;
                        background:none;
                        border: 1px solid #FF3939;
                        text-align: center;
                        font-size: 24rpx;
                        border-radius:30rpx;
                        span{
                          color: #FF3939;
                        }
                      }
                      .packet_unuse{
                        width:120rpx;
                        height:60rpx;
                        color: #fff;
                        margin-right: 20rpx;
                        line-height: 60rpx;
                        background:#bbb;
                        // border: 1px solid #bbb;
                        text-align: center;
                        font-size: 24rpx;
                        border-radius:30rpx;
                        span{
                          color: #fff;
                        }
                      } 
                }
                .coupnStateBox{
                    padding: 30rpx 20rpx 0 40rpx;
                    font-size: 24rpx;
                    height: 38rpx;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    color:#999999;
                }
                .readPacketcoupnStateBox{
                    padding: 50rpx 0rpx 0 35rpx;
                    font-size: 24rpx;
                    width:100%;
                    min-height: 120rpx;
                    .ruleImg{
                        width: 20rpx;
                        height: 12rpx;
                        margin-left: 10rpx;
                    }
                    .timeRange{
                        color: #999;
                        margin-top: 20rpx;
                    }
                }       
            }
            .ruleText{
                margin-top: -30rpx;
                position: relative;
                z-index: 0;
                padding: 20rpx 30rpx;
                background-color: #fff;
                font-size: 24rpx;
                color: #999;
                line-height: 36rpx;
              }
        }
    }
    .empty_view{
        text-align: center;
        margin-top: 200rpx;
        .img{
            width: 240rpx;
            height: 240rpx;
            display: block;
            margin: 0 auto 20rpx;
        }
        .tit{
            height: 48rpx;
            line-height: 48rpx;
        }
        .titC{
            color: #999999;
        }
    }
    .no-tip {
        color: #999;
        text-align: center;
        font-size: 26rpx;
        padding: 20rpx 0 40rpx;
      }
}
.details-container{
    .logItemOut{
        background-color: #fff;
        .month{
            background-color: #F5F5F5;
            color: #333333;
            font-size: 30rpx;
            height: 80rpx;
            padding: 0 20rpx;
            line-height: 80rpx;
        }
        .logItemBox {
            padding: 10px 10px;
            margin: 0 10px;
            justify-content: space-between;
            align-items: center;
            display: flex;
            border-bottom: 1px solid #eaeaea;
            &:nth-last-child(1){
            border-bottom: none;
            }
            .leftCont{
            .title{
                color: #0E0B0E;
                font-size: 15px;
            }
            .date{
                margin-top: 5px;
                color: #A5A5A5;
                font-size: 12px;
            }
            }
            .rightCont{
            justify-content: space-between;
            align-items: center;
            padding-bottom: 0;
            display: flex;
            img{
                width: 15px;
                margin: 5px;
            }
            &.isReward{
                color: #FE4034;
            }
            }
        }
    }
    .empty_view{
        text-align: center;
        margin-top: 200rpx;
        .img{
            width: 188rpx;
            height: 122rpx;
            display: block;
            margin: 0 auto 20rpx;
        }
        .tit{
            height: 48rpx;
            line-height: 48rpx;
        }
        .titC{
            color: #999999;
        }
    }
}